/* 
    Author Amron
    Date 2022-12-3
*/
header{
    min-width: 1152px;
}
header .topBar {
    height: 32px;
    background: #2A2A2A;
}
/* 头部顶层左侧链接 */
header .topBar .centerWrap .leftLink {
    float: left;
}
header .topBar .centerWrap .leftLink>ul>li{
    float: left;
    margin-right: 18px;
    height: 32px;
}
header .topBar .centerWrap .leftLink>ul>li a {
    font-size: 12px;
    line-height: 32px;
}
header .topBar .centerWrap .leftLink>ul>li:hover a {
    color: #20BD9A;
}
header .topBar .centerWrap .leftLink>ul>li.downMenu {
    padding-right: 20px;
    position: relative;
}
/* 制作顶栏的下拉菜单 */
header .topBar .centerWrap .leftLink>ul>li.downMenu .menu { 
    background-color: #fff;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.20);
    position: absolute;
    top: 29px;
    left: 0;
    padding: 6px 8px;
    display: none;
    z-index: 999;
}
/* 每个单独下拉菜单的宽高 */
header .topBar .centerWrap .leftLink>ul>li.downMenu .menu.social {
    width: 121px;
}
header .topBar .centerWrap .leftLink>ul>li.downMenu .menu.mall {
    width: 76px;
}
header .topBar .centerWrap .leftLink>ul>li.downMenu .menu.hotel {
    width: 64px;
}
header .topBar .centerWrap .leftLink>ul>li.downMenu .menu ul li a {
    font-size: 12px;
    color: #1C1F21;
    line-height: 18px;
    font-weight: bold;
}
header .topBar .centerWrap .leftLink>ul>li.downMenu .menu ul li:hover a {
    color:#20BD9A;
}
header .topBar .centerWrap .leftLink>ul>li.downMenu:hover .menu {
    display: block;
}
/* 通过两个三角边框实现了下拉菜单的小图标 以及动画 悬停样式 */
header .topBar .centerWrap .leftLink>ul>li.downMenu em {
    height: 18px;
    width: 18px;
    position: absolute;
    right: 0;
    top: 50%;
    margin-top: -9px;
    /* 设置舞台，让小图标的翻转有立体效果 */
    perspective: 40px;
    transition: transform .2s linear 0s;
}
header .topBar .centerWrap .leftLink>ul>li.downMenu:hover em {
    transform: rotateX(180deg);
    cursor: pointer;
}
header .topBar .centerWrap .leftLink>ul>li.downMenu em i {
    position: absolute;
    left: 3px;
    top: 5px;
}
header .topBar .centerWrap .leftLink>ul>li.downMenu em i:first-child {
    top: 7px;
    border: 6px solid #2A2A2A;
    border-top-color: white;
}
header .topBar .centerWrap .leftLink>ul>li.downMenu:hover>em i:first-child {
    border-top-color: #20BD9A;
}
header .topBar .centerWrap .leftLink>ul>li.downMenu em i:last-child {
    border: 6px solid transparent;
    border-top-color: #2A2A2A;
}
/* 头部顶层右侧图标链接 */
header .topBar .centerWrap .rightIcon {
    float: right;
}
/* 头部顶层右侧添加字体图标 */
header .topBar .centerWrap .rightIcon span {
    float: right;
    line-height: 32px;
    color: #fff;
    margin-left: 16px;
    font-size: 12px;
    cursor: none;
}
header .topBar .centerWrap .rightIcon span:hover {
    cursor: pointer;
    color: #20BD9A;
}
header .topBar .centerWrap .rightIcon span.iconfont {
    font-size: 18px;
}
/* 头部中间层的主导航栏 */
header .centerBar {
    background-color: #20BD9A;
    height: 40px;
}
header .centerBar nav>ul>li {
    float: left;
    margin-right: 18px;
    transition: background-color .2s linear 0s;
}
header .centerBar nav>ul>li:hover {
    cursor: pointer;
    background-color: #188d74;
}
header .centerBar nav>ul>li a {
    line-height: 40px;
}
header .centerBar nav>ul>li.downMenu {
    padding-right: 16px;
    position: relative;
}
/* 中间层的下拉菜单 */
header .centerBar nav>ul>li.downMenu .menu {
    background: #FFFFFF;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.20);
    padding: 6px 8px;
    position: absolute;
    left: 0;
    top: 33px;
    display: none;
    z-index: 9;
}
/* 单独设置每个下拉菜单的宽度 */
header .centerBar nav>ul>li.downMenu .menu.free {
    width: 160px;
}
header .centerBar nav>ul>li.downMenu .menu.follow {
    width: 106px;
}
header .centerBar nav>ul>li.downMenu .menu.local {
    width: 172px;
}
header .centerBar nav>ul>li.downMenu .menu.deep {
    width: 128px;
}
header .centerBar nav>ul>li.downMenu:hover .menu {
    display: block;
}
header .centerBar nav>ul>li.downMenu .menu h3 {
    font-size: 15px;
    color: #1C1F21;
    line-height: 22px;
    font-weight: bold;
}
header .centerBar nav>ul>li.downMenu .menu:hover {
    cursor: default;
}
header .centerBar nav>ul>li.downMenu .menu a {
    font-size: 13px;
    color: #1C1F21;
    line-height: 18px;
}
header .centerBar nav>ul>li.downMenu .menu a:hover {
    color: #20BD9A;
}
/* 头部中间层导航栏下拉菜单的小箭头 */
header .centerBar nav>ul>li.downMenu em {
    position: absolute;
    width: 16px;
    height: 16px;
    right: 0;
    top: 12px;
    transform-origin: 10px 8px;
    transition: transform .3s linear 0s;
}
header .centerBar nav>ul>li.downMenu em i {
    position: absolute;
    border: 4px solid transparent;
    border-top-color: white;
    left: 6px;
    top: 7px;
}
header .centerBar nav>ul>li:hover em {
    transform: rotate(-180deg) scale(1.2);
}
/* 头部下层 */
header .bottomBar {
    height: 78px;
}
header .bottomBar h1 {
    float: left;
    color: #20BD9A;
    font-size: 24px;
    line-height: 78px;
    font-weight: bold;
    margin-right: 20px;
}
header .bottomBar input {
    float: left;
    height: 28px;
    width: 372px;
    border: 1px solid #20BD9A;
    outline: none;
    margin-top: 24px;
    border-radius: 4px 0 0 4px;
    border-right: none;
}
header .bottomBar a {
    float: left;
    width: 32px;
    height: 30px;
    margin-top: 24px;
    background-color: #20BD9A;
    border-radius: 0 4px 4px 0;
    /* 头部的字体图标 */
    font-size: 20px;
    line-height: 30px;
    text-align: center;
    transition: font-size .2s linear 0s;
}
header .bottomBar a:hover {
    font-size: 24px;
}
.carousel {
    position: relative;
    min-width: 1152px;
    overflow: hidden;
}
/* 轮播图banner样式布局 */
.carousel #banner {
    width: 600%;
    transition:transform .3s ease 0s;
}
.carousel #banner li {
    width: 16.666%;
    float: left;
}
.carousel #banner li img {
    width: 100%;
    /* 设置图片的最小宽度 */
    min-width: 1152px;
    /* 一般图片跟盒子之间会有一个缝隙，使用这个属性可以去掉 */
    vertical-align: middle;
}

/* 轮播图小圆点样式 */
.carousel #cycles {
    position: absolute;
    width: 160px;
    height: 20px;
    left: 50%;
    margin-left: -80px;
    bottom: 20px;
    z-index: 9;
}
.carousel #cycles li{
    background-color: #20BD9A;
    width: 20px;
    height: 20px;
    margin-right: 10px;
    float: left;
    border-radius: 10px;
    cursor: pointer;
    transition: all .3s ease 0s;
}
.carousel #cycles li.current {
    width: 40px;
    background-color: #188d74;
}
.carousel #cycles li:last-child{
    margin-right: 0;
}

/* 让文字区域定位到中间，普通的margin不行，需要用绝对定位 */
.carousel .center {
    height: 100%;
    width: 1152px;
    position: absolute;
    left: 50%;  
    top: 0;
    margin-left: -576px;
}
.carousel .center .location {
    width: 652px;
    height: 100%;
}
.carousel .center .location .mainMenu {
    background-color: rgba(0,0,0,0.4);
    width: 296px;
    height: 100%;
}
.carousel .center .location .mainMenu>li {
    height: 16.66%;
    width: 100%;
    position: relative;
    /* 此处绘制边框线不改变布局的方法 */
    box-sizing: border-box;
    border-bottom: 1px solid rgba(255,255,255,0.2);
}
.carousel .center .location .mainMenu>li:hover {
    cursor: pointer;
    background-color: rgba(0,0,0,0.2);
}
/* 让li里面的dl绝对定位垂直居中 */
.carousel .center .location .mainMenu>li dl {
    position: absolute;
    height: 48px;
    left: 42px;
    top: 50%;
    margin-top: -24px;
}
.carousel .center .location .mainMenu>li dl dt {
    font-size: 18px;
    color:#fff;
    line-height: 26px;
}
.carousel .center .location .mainMenu>li dl dd {
    font-size: 14px;
    color:#fff;
    line-height: 22px;
}
/* 制作li里面的小图标 */
.carousel .center .location .mainMenu>li .littleIcon {
    width: 24px;
    height: 24px;
    position: absolute;
    top: 50%;
    margin-top: -12px;
    left: 10px;
}
.carousel .center .location .mainMenu>li.hot .littleIcon {
    background: url(../images/sprite.png) no-repeat -4px -98px;
}
.carousel .center .location .mainMenu>li.home .littleIcon {
    background: url(../images/sprite.png) no-repeat -2px -125px;
}
.carousel .center .location .mainMenu>li.japan .littleIcon {
    background: url(../images/sprite.png) no-repeat -3px -150px;
}
.carousel .center .location .mainMenu>li.asia .littleIcon {
    background: url(../images/sprite.png) no-repeat -1px -177px;
}
.carousel .center .location .mainMenu>li.europe .littleIcon {
    background: url(../images/sprite.png) no-repeat -2px -202px;
}
.carousel .center .location .mainMenu>li.australia .littleIcon {
    background: url(../images/sprite.png) no-repeat -2px -222px;
}

/* 制作li右侧的箭头 */
.carousel .center .location .mainMenu>li .to {
    width: 24px;
    height: 24px;
    position: absolute;
    top: 50%;
    margin-top: -12px;
    right: 9px;
    color: #fff;
    text-align: center;
    line-height: 24px;
}
/* 次级菜单的布局 */
.carousel .center .location>.secondary {
    height: 100%;
    width: 356px;
    top: 0;
    position: absolute;
    left: 296px;
    background-color: rgba(0,0,0,0.5);
    display: none;
    z-index: 99;
}
.carousel .center .location>.secondary.current {
    display: block;
}
.carousel .center .location>.secondary:hover {
    cursor: default;
}
/* 次级菜单的样式书写 */
.carousel .center .location>.secondary ul{
    padding-top: 16px;
    margin:0 16px;
}
.carousel .center .location>.secondary ul li {
    margin-bottom: 12px;
}
.carousel .center .location>.secondary ul li h3{
    font-size: 16px;
    color: #FFFFFF;
    line-height: 24px;
    margin-bottom: 4px;
}
.carousel .center .location>.secondary ul li a{
    font-size: 14px;
    color: #FFFFFF;
    line-height: 22px;
    margin-right: 4px;
}
.carousel .center .location>.secondary ul li a:hover {
    color: #20BD9A;
}
/* 制作轮播图左右的箭头 */
.carousel .center .arrow{
    width: 32px;
    height: 44px;
    position: absolute;
    top: 50%;
    margin-top: -22px;
    opacity: 0.6;
}
.carousel .center .arrow:hover {
    opacity: 1;
}
.carousel .center .arrow.left {
    background: url(../images/sprite.png) no-repeat -4px -3px;
    left: -42px;
}
.carousel .center .arrow.right {
    background: url(../images/sprite.png) no-repeat -4px -49px;
    right: -42px;
}
/* 热门广告图区域 */
aside ul{
    padding: 32px 0;
}
aside ul li {
    float: left;
    width: 264px;
    height: 110px;
    margin-right: 32px;
}
aside ul li:last-child {
    margin-right: 0;
}
/* 主体页面的title样式 */
main .title span {
    float: left;
    font-size: 12px;
    color: #1C1F21;
    line-height: 18px;
    position: relative;
    top: 30px;
    font-weight: bold;
}
main .title h2 {
    font-size: 36px;
    color: #1C1F21;
    line-height: 54px;
    font-weight: bold;
    float: left;
    margin-right: 12px;
}
/* 公共类tag样式 */
main li.tag {
    float: left;
    width: 264px;
    height: 270px;
    margin-right: 32px;
    margin-bottom: 32px;
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.08);
    transition: box-shadow .2s linear 0s;
    position: relative;
}
main li.tag .pic {
    height: 184px;
}
main li.tag .text {
    height: 44px;
    padding: 20px 14px 22px;
    font-size: 14px;
    color: #1C1F21;
    line-height: 22px;
    background-color: #fff;
}
main li.tag:hover {
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.20);
}
main li.tag:hover .pic {
    opacity: 0.7;
}
/* 公共类colorTag样式 */
main .colorTag {
    float: left;
    width: 264px;
    height: 270px;
    padding: 46px 14px;
    box-sizing: border-box;
    font-size: 14px;
    color: #FFFFFF;
    text-align: center;
    line-height: 22px;
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.08);
    transition: box-shadow .2s linear 0s;
}
main .colorTag .middleTag {
    margin: 28px 0 36px;
    height: 48px;
    line-height: 48px;
}
main .colorTag .middleTag span {
    font-size: 45px;
}
main .colorTag .bottomTag span {
    padding: 0 10px;
    border-right: 1px solid #fff; 
} 
main .colorTag .bottomTag span:last-child {
    border-right:none
}
main .colorTag:hover {
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.3);
}
/* 新鲜甩尾 */
main .daily {
    height: 698px;
    background-color: #f7f7f7;
    padding-top: 40px;
}
main .daily .title {
    height: 54px;
    margin-bottom: 32px;
}
/* 新鲜甩尾图文区域 */
main .daily .content ul li:nth-child(4n) {
    margin-right: 0;
}
/* 机酒自由行 */
main .travel {
    height: 738px;
}
main section .top {
    padding: 40px 0 32px;
}
main section .top .title {
    height: 54px;
    float: left;
}
/* 顶部导航条样式 */
main section .top nav {
    float: right;
}
main section .top nav ul {
    padding-top: 12px;
}
main section .top nav ul li {
    float: right;
    margin-left: 14px;
    padding-bottom: 4px;
}
main section .top nav ul li a {
    font-size: 14px;
    color: rgba(0,0,0,0.85);
    line-height: 22px;
}
main section .top nav ul li.current {
    border-bottom: 4px solid #20BD9A;
}
main section .top nav ul li.current a {
    color: #20BD9A;
}
/* 机酒图文区域 */
main section.odd .content>ul>li:nth-child(4n+3) {
    margin-right: 0;
}
/* 公共类bigTag样式 */
main section .content .bigTag {
    float: left;
    height: 270px;
    width: 560px;
    margin-right: 32px;
    margin-bottom: 32px;
    position: relative;
}
main section .content .bigTag div.desc{
    position: absolute;
    height: 103px;
    width: 560px;
    bottom: 0;
    background-color: rgba(28,31,33,.55);
    padding: 30px 26px;
    box-sizing: border-box;
    font-size: 14px;
    color: #FFFFFF;
    line-height: 22px;
}
/* 图片左下角文字样式 */
main .travel .content .note {
    width: 74px;
    height: 40px;
    text-align: center;
    line-height: 40px;
    background-color: rgba(28,31,33,.6);
    font-size: 14px;
    color: #fff;
    position: absolute;
    left: 0;
    bottom: 86px;
}
main .travel .content .bigTag .note {
    bottom: 103px;
}
/* 机酒颜色标签 */
main .travel li.colorTag {
    background-image: linear-gradient(180deg, #34E3BC 0%, #15AF7A 98%);
}
/* 当地玩乐 */
main .local {
    height: 586px;
    background-color: #F7F7F7;
}
main .local .localInfo {
    width: 364px;
    height: 420px;
    margin-right: 30px;
    float: left;
}
main .local .localInfo:last-child {
    margin-right: 0;
}
main .local .localInfo.left div:first-child {
    height: 270px;
    margin-bottom: 30px;
}
/* 设置通用的intro标签样式 */
main .local .localInfo .intro {
    height: 120px;
    background-color: #fff;
    display: table;
    margin-bottom: 30px;
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.08);
    transition: box-shadow .2s linear 0s;
}
main .local .localInfo .intro:hover {
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}
main .local .localInfo .intro img {
    float: left;
    width: 120px;
}
main .local .localInfo .intro span {
    padding: 0 18px;
    width: 208px;
    height: 120px;
    font-size: 14px;
    font-weight: bold;
    color: #000000;
    line-height: 22px;
    display: table-cell;
    vertical-align: middle;
}
/* 当地玩乐标签 */
main .local .localInfo.right .wider {
    width: 364px;
    background-image: linear-gradient(180deg, #FF6374 1%, #FF7368 98%);
}
/* 当地特色 */
main .feature {
    height: 456px;
    background-color: #fff;
    padding-top: 40px;
}
main .feature h2.title {
    font-size: 36px;
    color: #1C1F21;
    line-height: 54px;
    text-align: center;
    font-weight: bold;
    margin-bottom: 32px;
}
/* 评论标签样式 */
main .feature .comment ul li {
    width: 264px;
    height: 290px;
    float: left;
    margin-right: 32px;
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.08);
    transition: box-shadow .2s linear 0s;
}
main .feature .comment ul li:hover {
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}
main .feature .comment ul li:last-child {
    margin-right: 0;
}
main .feature .comment ul li .pic {
    height: 184px;
}
main .feature .comment ul li .text {
    height: 106px;
    box-sizing: border-box;
    padding: 16px 11px;
}
main .feature .comment ul li .text .name {
    font-size: 16px;
    color: #000000;
    line-height: 24px;
    height: 48px;
    margin-bottom: 8px;
    font-weight: bold;
}
main .feature .comment ul li .text .number {
    font-size: 12px;
    color: #000000;
    line-height: 18px;
}
main .feature .comment ul li .text .number span {
    font-size: 12px;
    color: #FA6400;
}
/* 世界旅行 */
main .world {
    height: 738px;
    background-color: #F7F7F7;
}
main .world li.colorTag {
    background-image: linear-gradient(180deg, #BD5EE8 0%, #832ABB 98%);
}
/* 圆圈样式 */
main section .content .bigTag .circle {
    position: absolute;
    width: 106px;
    height: 106px;
    top: 62px;
    left: 50%;
    margin-left: -53px;
    border-radius: 53px;
    border: 1px solid #fff;
    color: #fff;
    text-align: center;
    font-size: 18px;
    font-weight: bold;
    padding-top: 28px;
    box-sizing: border-box;
}
main section .content .bigTag .words {
    text-align: center;
    font-size: 14px;
    color: #FFFFFF;
    line-height: 22px;
    position: absolute;
    width: 508px;
    height: 22px;
    bottom: 30px;
    left: 50%;
    margin-left: -254px;
}
/* 跟团旅行 */
main .follow {
    height: 738px;
    background-color: #fff;
}
main .follow li.colorTag {
    background-image: linear-gradient(180deg, #41D8E9 0%, #3685EA 98%);
}
/* 页脚链接 */
footer .friendly {
    height: 184px;
    background-color: #f7f7f7;
    padding-top: 36px;
}
footer .friendly .up {
    height: 28px;
    margin-bottom: 40px;
}
footer .friendly .up li {
    float: left;
    font-size: 18px;
    color: #1C1F21;
    font-weight: bold;
    line-height: 28px;
    padding: 0 26px;
    border-right: 2px solid #1C1F21;
}
footer .friendly .up li:last-child {
    border-right: none;
    padding-right: 0;
}
footer .friendly .up li:first-child {
    padding-left: 0;
}
/* 公司理念 */
footer .friendly .down li {
    width: 364px;
    height: 76px;
    float: left;
    margin-right: 30px;
}
footer .friendly .down li:last-child {
    margin-right: 0;
}
footer .friendly .down .img {
    height: 60px;
    width: 60px;
    float: left;
    margin-right: 15px;
    background: url(../images/sprite.png) no-repeat -46px -84px;
}
footer .friendly .down .text {
    float: left;
    width: 289px;
    height: 76px;
}
footer .friendly .down .text p:first-child {
    font-size: 16px;
    color: #1C1F21;
    line-height: 24px;
    font-weight: bold;
    margin-bottom: 8px;
}
footer .friendly .down .text p:last-child {
    font-size: 14px;
    color: #1C1F21;
    line-height: 22px;
    font-weight: bold;
}
/* 宣传语 */
footer .slogan {
    height: 225px;
    background-color: #1C1F21;
    padding: 48px 0;
    box-sizing: border-box;
    font-size: 14px;
    color: #FFFFFF;
    line-height: 22px;
}
footer .slogan .topSlogan {
    height: 46px;
    margin-bottom: 31px;
}
footer .slogan .topSlogan span:first-child {
    line-height: 46px;
    font-size: 46px;
    color: #FFFFFF;
    line-height: 46px;
    margin-right: 21px;
}
footer .slogan .topSlogan span:last-child {
    height: 44px;
    width: 532px;
    display: inline-block;
}
footer .slogan .downLink p:first-child span{
    border-right: 1px solid #fff;
    padding: 0 13px;
}
footer .slogan .downLink p:first-child span:first-child {
    padding-left: 0;
}
footer .slogan .downLink p:first-child span:last-child {
    border-right: none;
}
footer .slogan .downLink p:last-child {
    margin-top: 8px;
}
/* 返回顶部 */
div.toTop {
    width: 60px;
    height: 60px;
    position: fixed;
    bottom: 100px;
    right: 20px;
    border-radius: 2px;
    background-color: rgba(28,31,33,0.50);
    text-align: center;
    line-height: 60px;
    display: none;
    cursor: pointer;
}
div.toTop a {
    font-size: 34px;
}